<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="product-detail">
    <s-header :name="'商品详情'"></s-header>
    <div class="detail-content">
      <div class="detail-swipe-wrap">
        <van-swipe @change="onChange" :touchable="true">
          <van-swipe-item v-for="item in categoryList" :key="item.id">
            <img :src="item.goods_banner" alt="">
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{ categoryList.length }}</div>
          </template>
        </van-swipe>
      </div>
      <div class="product-info">
        <div class="product-title">
          {{ goodsCarouselList.goods_name }}
        </div>
        <br>
        <div class="goods_detail">
          {{ goodsCarouselList.goods_detail }}
        </div>
        <br>
        <div class="product-price">
          <span>¥{{ goodsCarouselList.selling_price }}</span>
        </div>
        <div class="product-desc">免邮费 顺丰快递</div>
      </div>
      <ul class="user-list">
        <li @click="Goto()" v-if="(address_list.length>0)">
          <span>配送至: <span>{{ province }}</span> <span>{{ city }}</span> <span>{{ region }}</span> </span>
          <van-icon name="arrow"/>
        </li>
        <li v-else @click="to">
          <span>当前还没有地址请先添加地址</span>
          <van-icon name="arrow"/>
        </li>
      </ul>
      <div class="product-intro">
        <ul>
          <li>概述</li>
          <li @click="show=true">参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <van-action-sheet v-model="show" title="产品参数">
          <van-row>
            <div v-for="(val,key) in actions" :key="key">
              <div v-for="(val1,key1, i) in val" :key="i">
                <p class="canshu">
                  <van-col span="4" v-if="val1">{{ key1 }}</van-col>
                  <van-col span="2" v-if="val1">&nbsp;</van-col>
                  <van-col span="18" v-if="val1">{{ val1 }}</van-col>
                </p>
                <hr v-if="val1">
              </div>
            </div>
          </van-row>
          <van-button round block type="info" color="#1baeae" native-type="submit" @click="show=false">完成</van-button>
        </van-action-sheet>
        <div v-for="item in categoryADList" :key="item.id">
          <img :src="item.goods_ad" alt="" width="100%">
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服"/>
      <van-goods-action-icon icon="cart-o" :info="this.$store.state.cart_num" @click="goTo()" text="购物车"/>
      <van-goods-action-button type="warning" @click="addCart" text="加入购物车"/>
      <van-goods-action-button type="danger" @click="goToCart" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>

import sHeader from '@/components/SimpleHeader'
import {Toast} from 'vant'

export default {
  data() {
    return {
      goodsCarouselList: [],
      id: '',
      current: 0,
      categoryList: [],
      categoryADList: [],
      show: false,
      actions: [],
      province: '',
      city: '',
      region: '',
      shop_id: '',
      default_province: '',
      default_city: '',
      default_region: '',
      user_id: '',
      address_list: []
    }
  },
  components: {
    sHeader
  },
  created() {
    this.id = this.$cookies.get('id')
    this.shop_id = this.$route.params
    this.$axios.get(this.$settings.BASE_URL + 'address/detail/?user_id=' + this.id,
      {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}
    ).then(res => {
      if (res.code == 100) {
        this.address_list = res.result
        this.$axios.get(this.$settings.BASE_URL + 'shopcar/car/?user_id=' + this.id,
          {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
          if (res.code == 100) {
            let cart_len = res.result.length
            if (!(this.$store.state.cart_num == cart_len)) {
              this.$store.dispatch('cart', cart_len)
            }
          }
        })
        this.$axios.get(this.$settings.BASE_URL + 'address/default/?user_id=' + this.id,
          {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
          if (res.code == 100) {
            this.default_province = res.result.province_name, this.default_city = res.result.city_name, this.default_region = res.result.region_name
          }
        })
        this.$axios.get(this.$settings.BASE_URL + 'address/ship/?user_id=' + this.id,
          {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
          if (res.code == 100) {
            if (!(this.$store.state.province_name && this.$store.state.city_name && this.$store.state.region_name)) {
              this.province = res.result.province_name
              this.city = res.result.city_name
              this.region = res.result.region_name
            } else if ((this.default_province == res.result.province_name && this.default_city == res.result.city_name && this.default_region == res.result.region_name)) {
              this.province = this.default_province
              this.city = this.default_city
              this.region = this.default_region
            } else {
              this.province = this.$store.state.province_name
              this.city = this.$store.state.city_name
              this.region = this.$store.state.region_name
            }
          }

        })
      }
    })
    this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/detail/' + this.shop_id.id + '/',
      {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
      this.goodsCarouselList = res.result
      this.categoryList = res.result.goods_banner
      this.categoryADList = res.result.goods_ad
      this.actions = res.result.goods_arguments
      let goods_list = []
      for (let item of res.result.goods_arguments) {
        goods_list.push(
          {'网络模型': item.goods_cdma},
          {'品牌': item.goods_brand},
          {'型号': item.goods_model},
          {'分辨率': item.goods_resolution_ratio},
          {'机身颜色': item.goods_color},
          {'存储容量': item.goods_storage},
          {'上市时间': item.goods_time_to_market},
          {'电池容量': item.goods_battery_capacity},
          {'处理器': item.goods_processor},
          {'像素': item.goods_pixel},
          {'套餐类型': item.goods_combo},
          {'3c证书': item.goods_certificate}
        )
      }
      this.actions = goods_list
    })
  },


  methods: {
    to() {
      if (this.$cookies.get('token')) {
        this.$router.push({path: '/address'})
      } else {
        Toast.fail('您还没有登录,清先登录')
        this.$router.push({path: '/login'})
      }
    },
    Goto() {
      this.$router.push({path: '/shippingaddress'})
    },
    onChange(index) {
      this.current = index;
    },
    goBack() {
      this.$router.go(-1)
    },
    goTo() {
      this.$router.push({path: '/cart'})
    },
    addCart() {
      if (this.address_list.length > 0) {
        this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/one/' + this.shop_id.id + '/').then(res => {
          if (res.code == 100) {
            this.$axios.get(this.$settings.BASE_URL + 'shopcar/car' + '/?user_id=' + this.id + '&goods_id=' + this.shop_id.id,
              {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}
            ).then(res => {
              if (res.result.length > 0) {
                this.$axios.put(this.$settings.BASE_URL + 'shopcar/update/' + res.result[0].id + '/?user_id=' + this.id,
                  {buy_num: res.result[0].buy_num + 1, shop_id: this.shop_id.id},
                  {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
                  if (res.code == 100) {
                    Toast.success('添加成功')
                  }
                  Toast.fail(res.msg)
                })
              } else {
                this.$axios.post(this.$settings.BASE_URL + 'shopcar/car/?user_id=' + this.id, {
                    buy_num: 1, goods: this.shop_id.id, user: this.id, orders: 1
                  }, {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}
                ).then(res => {
                  if (res.code == 100) {
                    Toast.success('添加成功')
                    this.$store.dispatch('addcart', 1)
                  } else {
                    Toast.fail(res.msg)
                  }
                })
              }
            })
          } else {
            Toast.fail(res.msg)
          }
        })
      } else {
        Toast.fail('您还没有地址请先添加地址')
      }
    },

    async goToCart() {
      if (this.address_list.length > 0) {
        this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/one/' + this.shop_id.id + '/').then(res => {
          if (res.code == 100) {
            let goodsList = [{
              buy_num: 1,
              goods_info: {
                'id': this.goodsCarouselList.id,
                'img': this.goodsCarouselList.goods_img,
                'name': this.goodsCarouselList.goods_name,
                'price': this.goodsCarouselList.selling_price,
                'original_price': this.goodsCarouselList.original_price,
              },
            }]
            this.$store.state.params = goodsList
            this.$router.push({path: '/create-order'})
          } else {
            Toast.fail(res.msg)
          }
        })
      } else {
        Toast.fail('您还没有地址请先添加地址')
      }
    }
  },
}
</script>

<style lang="less">
  @import '../common/style/mixin';
  .product-detail {
    .detail-header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      .fj();
      .wh(100%, 44px);
      line-height: 44px;
      padding: 0 10px;
      .boxSizing();
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .product-name {
        font-size: 14px;
      }
    }
    .detail-content {
      margin-top: 44px;
      .detail-swipe-wrap {
        .my-swipe .van-swipe-item {
          img {
            width: 100%;
            // height: 300px;
          }
        }
      }
      .custom-indicator{
        font-size: 8px;
        text-align: center;
      }
      .product-info {
        padding: 0 10px;
        .product-title {
          font-size: 20px;
          text-align: left;
          padding-left: 10px;
          color: #333;
        }
        .product-desc {
          font-size: 16px;
          text-align: left;
          color: #999;
          padding: 5px 0;
        }
        .goods_detail{
        font-size: 17px;
      }
        .product-price {
          .fj();
          span:nth-child(1) {
            color: #F63515;
            font-size: 22px;
          }
          span:nth-child(2) {
            color: #999;
            font-size: 16px;
          }
        }
      }
      .product-intro {
        width: 100%;
        color: @primary;
        ul {
          .fj();
          width: 100%;
          margin: 10px 0;
          color: @primary;
          li {
            flex: 1;
            padding: 5px 0;
            text-align: center;
            color: @primary;
            font-size: 15px;
            border-right: 1px solid #999;
            box-sizing: border-box;
            &:last-child {
              border-right: none;
            }
          }
        }
        .product-content {
          padding: 0 20px;
          img {
            width: 100%;
          }
        }
      }
        .user-list {
    padding: 0 20px;

    li {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e9e9e9;
      display: flex;
      justify-content: space-between;
      font-size: 16px;

      .van-icon-arrow {
        margin-top: 13px;
      }
    }
  }
    }
    .van-goods-action-button--warning {
      background: linear-gradient(to right,#6bd8d8, @primary)
    }
    .van-goods-action-button--danger {
      background: linear-gradient(to right, #0dc3c3, #098888)
    }
  }
</style>
